<template>
  <div class="all">
    <div class="top">
      <header>
        <div class="div" @click="back">
          <img src="../../assets/返回.png" alt="">
          <span class="solid">返回</span>
        </div>
        <div class="div">
          <span>实名认证</span>
        </div>
        <div class="div">
          <span></span>
        </div>
      </header>
      <div class="menu">
        <el-steps :active="menuIndex" align-center>
          <el-step title=""
                   v-for="(item, index) in menuList"
                   :key="index"
                   @click.native="changeMenu(index, url)"
                   process-status="success"
                   :description="item.title">
            <template #icon>
              <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
                <img src="../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
              </div>
              <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
                <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
              </div>
            </template>
          </el-step>
        </el-steps>
      </div>
      <div class="tips">完成实名认证后，可开通咨询服务，管理您的患者档案</div>
    </div>
    <div class="title">
      <a  class="hengGang"></a>
      以下信息将展示在您的个人主页上
    </div>
    <van-field
      v-model="CareerInfo.STAFF_NAME"
      label="姓名"
      placeholder="请务必填写本人姓名"
      input-align="right"
      type="text"
    />
    <van-field is-link v-model="CareerInfo.ptDEPART" type="text" readonly placeholder="请选择您在平台服务的科室" label="平台服务科室" input-align="right"  @click="ptKeShishow = true" />
    <van-field is-link v-model="CareerInfo.MAJOR" type="text" readonly placeholder="请选择职称" label="职称" input-align="right" @click="majorShow = true" />
    <van-field is-link v-model="CareerInfo.hospital" type="text" readonly placeholder="请选择执业医院" label="医院" input-align="right" @click="hospitalShow = true" />
    <van-field is-link v-model="CareerInfo.hosDEPART" type="text" readonly placeholder="请选择医院执业科室" label="医院执业科室" input-align="right"  @click="hosKeShishow = true" />
    <van-field type="text" readonly  label="擅长" input-align="right"  />
    <div style="background: #FFFFFF;display: flex;justify-content: center">
      <div class="textareaDiv">
        <textarea
          v-model="CareerInfo.Goodat"
          maxlength="500"
          placeholder="请描述您擅长的疾病及行医经验，有助于为您精准的匹配到相应的患者" name="" id="" cols="30" rows="10"></textarea>
        <p>{{CareerInfo.Goodat.length}}/500</p>
      </div>
    </div>
    <van-field type="text" readonly  label="介绍" input-align="right"  />
    <div style="background: #FFFFFF;display: flex;justify-content: center">
      <div class="textareaDiv">
        <textarea
          v-model="CareerInfo.INTRODUCE"
          maxlength="500"
          placeholder="请简单介绍一下您的情况，有助于为您精准的匹配到相应的患者" name="" id="" cols="30" rows="10"></textarea>
        <p>{{CareerInfo.INTRODUCE.length}}/500</p>
      </div>
    </div>
    <div class="title" style="margin-top: 10px">
      <a  class="hengGang"></a>
      个人拓展信息
    </div>
    <van-field  v-model="CareerInfo.GRADUATE_SCHOOL" type="text"  placeholder="请输入您最近毕业的学校" label="毕业学校" input-align="right"   />
    <van-field is-link v-model="CareerInfo.GRADUATE_DATE" type="text" readonly placeholder="请选择您毕业的时间" label="毕业时间" input-align="right" @click="dateShow = true"  />
    <van-field  v-model="CareerInfo.GRADUATE_CLASS" type="text"  placeholder="请输入就读班级" label="就读班级" input-align="right"   />
    <div class="bottom">
      <button class="keepButton" @click="next">下一步</button>
    </div>
<!--     医院-->
    <van-popup v-model="hospitalShow"
               round position="bottom"
    :style="{bottom: '50px'}"
    >
      <van-area v-show="cityshow === true"
                item-height="15vw"
                :columns-num="2"
                title="请选择城市"
                @cancel="cityshow = false"
                @confirm="onAreaConfirm"
                :area-list="areaList" />
      <van-picker
        show-toolbar
        title="请选择机构"
        :columns="hospitalColumns"
        @cancel="hospitalShow = false"
        @confirm="hospitalConfirm"
        v-show="cityshow === false"
      >
        <template #columns-top>
          <div class="search">
            <form action="/">
              <van-search
                v-model="hospitalValue"
                placeholder="请输入机构"
                @keyup.enter="hospitalonSearch"
                @input="hospitalonSearch"
                @search="hospitalonSearch"
                shape="round"
              >
                <template #left-icon>
                  <div style="height: 100%;border-right:1px solid #E5E5E5;display: flex;align-items: center">
                    <img src="../../assets/地址蓝.png" style="width: 12px;height: 13px;margin-right: 5px" alt="">
                    <input type="text"
                           class="cityInput"
                           @click="cityshow = true"
                           placeholder="选择城市"
                           v-model="city"
                           readonly
                           style="width: 70px;border: none;background: none;color: #1DA4F2">
                  </div>
                </template>
              </van-search>
            </form>
          </div>
        </template>
      </van-picker>
    </van-popup>
<!-- 平台科室-->
    <van-popup v-model="ptKeShishow" :style="{bottom: '50px'}" round position="bottom">
      <van-picker
        title="请选择平台服务科室"
        show-toolbar
        :columns="ptKeshiColumns"
        @cancel="ptKeShishow = false"
        @confirm="ptKeShionConfirm"
      >
        <template #columns-top>
          <div class="search">
            <form action="/">
              <van-search
                v-model="ptKeshiValue"
                show-action
                placeholder="请输入科室"
                @search="ptKeshionSearch"
                @keyup.enter="ptKeshionSearch"
                @input="ptKeshionSearch"
                shape="round"
              >
                <template #action>
                  <!--                  <div @click="keshionSearch" class="solt">搜索</div>-->
                </template>
              </van-search>
            </form>
          </div>
        </template>
      </van-picker>
    </van-popup>
<!--     职称-->
    <van-popup v-model="majorShow" :style="{bottom: '50px'}" round position="bottom">
      <van-picker
        title="请选择科室"
        show-toolbar
        :columns="majorColumns"
        @cancel="majorShow = false"
        @confirm="majoronConfirm"
      >
      </van-picker>
    </van-popup>
    <!-- 医院科室-->
    <van-popup v-model="hosKeShishow" :style="{bottom: '50px'}" round position="bottom">
      <van-picker
        title="请选择医生执业科室"
        show-toolbar
        :columns="hosKeshiColumns"
        @cancel="hosKeShishow = false"
        @confirm="hosKeShionConfirm"
      >
        <template #columns-top>
          <div class="search">
            <form action="/">
              <van-search
                v-model="hosKeshiValue"
                show-action
                placeholder="请输入科室"
                @search="hosKeshionSearch"
                @keyup.enter="hosKeshionSearch"
                @input="hosKeshionSearch"
                shape="round"
              >
                <template #action>
                </template>
              </van-search>
            </form>
          </div>
        </template>
      </van-picker>
    </van-popup>
<!--     毕业时间-->
    <van-popup round v-model="dateShow" :style="{bottom: '50px'}" position="bottom">
      <van-datetime-picker
        v-model="schoolDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="schoolconfirm()"
        @cancel="dateShow = false"
        title="毕业时间"
      />
    </van-popup>
    <van-dialog v-model="backShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="当前信息还未保存是否确认返回？"
                @confirm="backConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import area from '../../components/China/area'
import {Toast} from 'vant'

export default {
  name: 'CareerInformation',
  data () {
    return {
      menuIndex: 0,
      menuList: [
        {
          title: '执业信息',
          url: '/CareerInformation'
        }, {
          title: '执业证书',
          url: '/PracticeCertificate'
        }, {
          title: '实名信息',
          url: '/RealNameInfomation'
        }
      ],
      CareerInfo: {
        STAFF_NAME: '',
        ptDEPART: '', // 平台科室
        MAJOR: '', // 医生职称
        hospital: '', // 医院
        hospitalID: '', // 医院对应id
        hosDEPART: '', // 医院科室
        Goodat: '', // 擅长
        INTRODUCE: '', // 介绍
        GRADUATE_SCHOOL: '', // 毕业学校
        GRADUATE_DATE: '', // 毕业时间
        GRADUATE_CLASS: '' // 就读班级
      },
      // 医院
      hospitalColumns: [], // 医院
      hospitalShow: false,
      hospitalValue: '', // 医院搜索使用的关键字
      cityshow: false, // 医院城市
      city: sessionStorage.getItem('LocationCity'),
      areaList: area,
      // 平台科室
      ptKeShishow: false,
      ptKeshiColumns: [],
      ptKeshiValue: '',
      //  职称
      majorColumns: ['主任医师',
        '副主任医师',
        '主治医师',
        '主管护理师'],
      majorShow: false,
      // 医院科室
      hosKeShishow: false,
      hosKeshiColumns: [],
      hosKeshiValue: '',
      //  毕业时间
      dateShow: false,
      schoolDate: new Date(),
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(),
      backShow: false
    }
  },
  mounted () {
    // 医院字典
    this.getfindHopZiDian()
    // 平台科室
    this.getfindptKeShiZiDian()
    // 医院科室
    this.getfindhosKeShiZiDian()

    let data = sessionStorage.getItem('realNameData')
    if (data) {
      data = JSON.parse(data)
      if (data.CareerInfo) {
        this.CareerInfo = data.CareerInfo
      }
    }
  },
  methods: {
    // 下一步
    next () {
      if (!this.CareerInfo.STAFF_NAME) {
        Toast('请填写本人姓名')
        return false
      } else if (!this.CareerInfo.ptDEPART) {
        Toast('请选择平台服务科室')
        return false
      } else if (!this.CareerInfo.MAJOR) {
        Toast('请选择职称')
        return false
      } else if (!this.CareerInfo.hospital) {
        Toast('请选择医院')
        return false
      } else if (!this.CareerInfo.hosDEPART) {
        Toast('请选择医院执业科室')
        return false
      } else if (!this.CareerInfo.Goodat) {
        Toast('请填写擅长')
        return false
      } else if (!this.CareerInfo.INTRODUCE) {
        Toast('请填写介绍')
        return false
      } else if (!this.CareerInfo.GRADUATE_SCHOOL) {
        Toast('请填写毕业学校')
        return false
      } else if (!this.CareerInfo.GRADUATE_DATE) {
        Toast('请选择毕业时间')
        return false
      } else if (!this.CareerInfo.GRADUATE_CLASS) {
        Toast('请填写就读班级')
        return false
      }
      let data = new Object()
      if (sessionStorage.getItem('realNameData')) {
        data = JSON.parse(sessionStorage.getItem('realNameData'))
      } else {
        // data = {
        //   CareerInfo: this.CareerInfo
        // }
      }
      data.CareerInfo = this.CareerInfo
      sessionStorage.setItem('realNameData', JSON.stringify(data))
      this.$router.replace({path: this.menuList[this.menuIndex + 1].url})
      // this.$router.push({path: this.menuList[this.menuIndex + 1].url})
    },
    backConfirm () {
      // this.$router.push({path: '/my'})
      this.$router.history.go(-1)
    },
    // 返回
    back () {
      this.backShow = true
    },
    // 步骤条切换
    changeMenu () {

    },
    // 医院城市确认按钮
    onAreaConfirm (val) {
      this.city = val[1].name
      //  查看机构字典表
      this.getfindHopZiDian()
      this.cityshow = false
      this.hospitalShow = true
    },
    // 医院字典
    getfindHopZiDian () {
      this.$http.findHopZiDian({city: this.city, name: this.hospitalValue})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            var _this = this
            _this.hospitalColumns = []
            res.data.data.forEach(function (current, index, arr) {
              let obj = {
                text: current.hopstial_name,
                id: current.id
              }
              _this.hospitalColumns.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 医院确认按钮
    hospitalConfirm (value, index) {
      this.CareerInfo.hospital = value.text
      this.CareerInfo.hospitalID = value.id
      this.hospitalShow = false
    },
    // 医院搜索
    hospitalonSearch () {
      //  获取医院
      this.getfindKeShiZiDian()
    },
    // 平台科室确认按钮
    ptKeShionConfirm (value, index) {
      this.CareerInfo.ptDEPART = value
      this.ptKeShishow = false
    },
    // 平台科室搜索
    ptKeshionSearch () {
      this.getfindptKeShiZiDian()
    },
    // 获取科室
    getfindptKeShiZiDian () {
      this.$http.findKeShiZiDian({name: this.ptKeshiValue})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.ptKeshiColumns = []
            var _this = this
            res.data.data.forEach(function (current, index, arr) {
              _this.ptKeshiColumns.push(current.name)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 职称确认
    majoronConfirm (value, index) {
      this.CareerInfo.MAJOR = value
      this.majorShow = false
    },
    // 医院科室确认
    hosKeShionConfirm (value, index) {
      this.CareerInfo.hosDEPART = value
      this.hosKeShishow = false
    },
    // 医院科室搜索
    hosKeshionSearch () {
      this.getfindhosKeShiZiDian()
    },
    // 获取科室
    getfindhosKeShiZiDian () {
      this.$http.findKeShiZiDian({name: this.hosKeshiValue})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.hosKeshiColumns = []
            var _this = this
            res.data.data.forEach(function (current, index, arr) {
              _this.hosKeshiColumns.push(current.name)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      } else if (type === 'day') {
        return `${val}日`
      }
      return val
    },
    // 毕业时间
    schoolconfirm () {
      this.CareerInfo.GRADUATE_DATE = new Date(this.schoolDate).toLocaleDateString().replace(/\//g, '-')
      this.dateShow = false
    }
  },
  destroyed () {
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
.top{
  position: sticky;
  top: 0;
  z-index: 9;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
.tips{
  min-height: 35px;
  background: #FEFAF8;
  color: #ED8052;
  font-size: 13px;
}
.title{
  width: 100%;
  min-height: 44px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  padding: 0 15px;
  box-sizing: border-box;
  font-weight: bold;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}
.tips,
.bottom{
  display: flex;
  align-items: center;
  justify-content: center;
}
.textareaDiv{
  width: 92%;
  height: 140px;
  border: 1px solid #999999;
  border-radius: 10px;
  overflow: hidden;
  background: #FFFFFF;
  padding: 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
}
.textareaDiv p{
  font-size: 13px;
  font-weight: 500;
  color: #999999;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.textareaDiv textarea{
  resize: none;
  width: 100%;
  height: 90%;
  border: none;
  font-size: 13px;
  overflow: auto;
}
.textareaDiv textarea::placeholder{
  color: #999999;
}
.bottom{
  height: 60px;
  background: #FFFFFF;
  position: sticky;
  bottom: 0;
}
.keepButton{
  width: 92%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 22px;
  color: #FFFFFF;
  border: none;
  margin: 10px 3%;
  font-size: 17px !important;
  font-weight: bold;

}
/deep/ .van-field__label{
  width: 7.2em;
}
/deep/ .van-cell{
  font-size: 15px;
}

.menu{
  width: 100%;
  height: 60px;
  background: #1DA4F2;
  box-shadow: 0px 1px 0px 0px #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
}
/*/ 选择框 开始样式/*/
/deep/ .el-steps--horizontal{
  width: 105%;
}
/deep/ .el-step.is-center .el-step__description{
  padding: 0;
}
/deep/ .el-step__description{
  margin: 0;
  font-size: 13px;
}
/deep/ .el-step__icon{
  width: auto;
  height: auto;
}
/deep/ .el-step__icon.is-text{
  border: none;
}
/deep/ .is-finish,
/deep/ .el-step__description.is-process{
  color: #fff;
}
/deep/ .el-step__description.is-finish{
  color: white !important;
}
/deep/ .el-step__description.is-wait{
  color: rgba(255, 255, 255, 0.7);
}
/deep/ .el-step__head.is-finish{
  border-color: #fff;
}
/deep/ .el-step__head.is-wait{
  border-color: transparent !important;
}
/deep/ .el-step__line{
  border-color: transparent !important;
}
/deep/ .el-step.is-horizontal .el-step__line{
  height: 1px;
  /*top:7px;*/
  top: 35%;
}
/deep/ .el-step__line{
  background: white;
}
/*/ 选择框 结束样式/*/
</style>
